<template>
  <div id="app">
    <div class="box-header">
      <h1>GRTS在线教育视频网站后台</h1>
      <p>ONLINE EDUCATION</p>
    </div>
    <div class="box">
      <div class="box-content">
        <img class="lt-img" src="../assets/1.png" width="100px" />
        <img class="rt-img" src="../assets/2.png" width="100px" />
      </div>
      <div>
        <div class="step-box">
          <el-steps :active="3" align-center>
            <el-step title="确认账号"></el-step>
            <el-step title="重置密码"></el-step>
            <el-step title="重置成功"></el-step>
          </el-steps>
        </div>
        <div class="step-content">
          <img src="../assets/3.png" alt="">
          <span id="span1">重置密码成功~</span>
          <el-button @click="toLogin" class="confirm" type="primary"
            >返回登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 会把login.vue组件导出到main.js，再根据router的规则来决定替换div标签下面的组件
export default {
  data() {
    return {
    };
  },
  created(){
    let success=sessionStorage.getItem("success");
    if(success!="ok"){
        this.$router.push("/ConfirmEmail");
        return;
    }
    //用户第一次进来以后 第二次就能直接进去了
    sessionStorage.removeItem("success");
  },
  methods: {
    toLogin() {
        this.$router.push("/");
    },
  },
};
</script>
<style scoped>
#app {
  background-color: #ffd1b7;
  overflow: hidden;
}
.box-header {
  height: 100px;
  margin-top: 80px;
}
.box-header h1 {
  color: #fff;
  text-align: center;
  font-size: 30px;
  line-height: 90px;
  height: 70px;
}
.box-header p {
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.box {
  position: relative;
  border-bottom: 3px solid #fb966f;
  border-right: 3px solid #fb966f;
  background-color: #fee4d4;
  height: 400px;
  width: 750px;
  margin: 0px auto;
  box-shadow: 10px 10px 6px 2px rgb(251 150 108 / 60%);
  overflow: hidden;
}
.lt-img {
  position: absolute;
  left: 0;
  bottom: 0;
}
.rt-img {
  position: absolute;
  right: 0;
  bottom: 0;
}
.step-box {
  margin-top: 50px;
}
.step-content {
  width: 400px;
  margin: 60px auto;
}
.confirm {
  margin-top: 165px;
  width: 400px;
}
.step-content img {
  position: absolute;
  left: 280px;
  top: 80px;
}
#span1 {
  position: absolute;
  left: 353px;
  top: 300px;
}
</style>